<template>
  <div class="" style="width: 100%; height: 100%">
    <el-popover
      placement="top-start"
      :width="getscalepxcnum(220)"
      trigger="click"
    >
      <div style="text-align: left" class="settingpopdiv">
        <el-divider>时间范围</el-divider>

        <!-- <timepick>
          <el-button type="primary" @click="1">时间选择</el-button>
        </timepick> -->

        <el-divider>面板选择</el-divider>

        <el-checkbox-group v-model="pannelarr" @change="1">
          <el-checkbox
            v-for="item in panneloptions"
            :label="item.value"
            :key="item.value"
            :value="item.value"
            >{{ item.label }}</el-checkbox
          >
        </el-checkbox-group>

        <!-- <el-divider>地图类型</el-divider> -->
        <!-- <el-radio-group v-model="scencetype">
          <el-radio :label="item.value" v-for="item in scencetypeoptions">{{
            item.name
          }}</el-radio>
        </el-radio-group> -->

        <el-divider>其他</el-divider>

        <!-- <efficiency /> -->
      </div>

      <div slot="reference">
        <div
          :class="{}"
          :style="{
            width: this.getscalepxc(50),
            height: this.getscalepxc(50),
            backgroundSize: '100% 100%',
            backgroundPosition: 'center',
            backgroundRepeat: 'no-repeat',
            backgroundImage: `url(/configuration/2d/shezhi.png)`,
          }"
          @click="1"
        ></div>
      </div>
    </el-popover>
  </div>
</template>
<script>
import commonmixins from "@/mixins/bigScreen/commonmixins";

export default {
  name: "settingbtnzzn",
  mixins: [commonmixins],
  components: {},
  data() {
    return {
      pannelarr: ["leftpannel", "rightpannel", "warnpannel", "zhuyipannel"],
      panneloptions: [
        {
          value: "leftpannel",
          label: "左侧面板",
        },
        {
          value: "rightpannel",
          label: "右侧面板",
        },
        {
          value: "warnpannel",
          label: "告警信息",
        },
        {
          value: "zhuyipannel",
          label: "注意事项",
        },
        {
          value: "jindutiaopannel",
          label: "进度条",
        },
      ],
      scencetypeoptions: [
        { name: "能效", value: "nengxiao" },
        { name: "gis地图", value: "gongre" },
      ],
      scencetype: "gongre",
    };
  },
  computed: {},
  watch: {
    pannelarr: {
      handler: function (n, o) {
        this.switchpannel(n);
      },
      immediate: true,
    },
    scencetype: {
      handler: function (n, o) {
        this.switchbtn(n);
      },
    },
  },
  mounted() {},
  methods: {
    switchpannel(type) {
      this.$store.state.daping.hidepannel = [];
      this.panneloptions.map((item) => {
        if (type.indexOf(item.value) == -1) {
          this.$store.state.daping.hidepannel.push(item.value);
        }
      });
      this.$store.state.daping.showhidearr = type;
      this.$notify.info({
        message: "切换面板成功",
      });
    },
    switchbtn(type) {
      this.$store.state.daping.scencetype = type;
      this.$notify.info({
        message: "三维地图场景切换成功",
      });
    },
  },
};
</script>
<style lang='scss'>
//设置按钮跟能效图下拉框的字体都在此设置

</style>